<template>
  <div class="content codeTable">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane v-for="item of oneMaterielData" :key="item.fid" :label="item.fname" :name="item.fid + ''">
        <div class="table-content">
          <jc-table
            :table-data="tableData"
            :table-header="tableHeader"
            :table-height="tableHeight"
            get-row-keys="fid"
          >
            <!--            get-row-keys="fid"-->
            <!--            default-expand-all-->
            <!--            serial-->
            <!--            :tree-props="{children: 'children', hasChildren: 'hasChild'}"-->
            <el-table-column prop="fname" :label="$t('market.fname1')" width="120px" align="center" />
            <el-table-column prop="fnumber" :label="$t('market.fnumber1')" width="120px" align="center" />
            <el-table-column :label="$t('market.fname2')" width="120px" align="center">
              <template slot-scope="scope">
                <div v-for="item in scope.row.children" :key="item.fid" class="erlei">
                  <div>{{ item.fname }}</div>
                  <div style="display: block;flex-direction: column">
                    <div v-for="ite in item.children" :key="ite.fid" class="erlei">
                      <div class="divHeight" />
                      <div style="display: block;flex-direction: column">
                        <div v-for="it in ite.children" :key="it.fid" class="divHeight" />
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="medium" :label="$t('market.fnumber2')" width="120px" align="center">
              <template slot-scope="scope">
                <div v-for="item in scope.row.children" :key="item.fid" class="erlei">
                  <div>{{ item.fnumber }}</div>
                  <div style="display: block;flex-direction: column">
                    <div v-for="ite in item.children" :key="ite.fid" class="erlei">
                      <div class="divHeight" />
                      <div style="display: block;flex-direction: column">
                        <div v-for="it in ite.children" :key="it.fid" class="divHeight" />
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="medium" :label="$t('market.fname3')" width="140px" align="center">
              <template slot-scope="scope">
                <div v-for="item in scope.row.children" :key="item.fid" class="erlei">
                  <div class="divHeight" />
                  <div style="display: block;flex-direction: column;width: 100%;">
                    <div v-for="ite in item.children" :key="ite.fid" class="erlei">
                      <div>{{ ite.fname }}</div>
                      <div style="display: block;flex-direction: column">
                        <div v-for="it in ite.children" :key="it.fid" class="divHeight" />
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="medium" :label="$t('market.fnumber3')" width="140px" align="center">
              <template slot-scope="scope">
                <div v-for="item in scope.row.children" :key="item.fid" class="erlei">
                  <div class="divHeight" />
                  <div style="display: block;flex-direction: column;width: 100%;">
                    <div v-for="ite in item.children" :key="ite.fid" class="erlei">
                      <div>{{ ite.fnumber }}</div>
                      <div style="display: block;flex-direction: column">
                        <div v-for="it in ite.children" :key="it.fid" class="divHeight" />
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="medium" :label="$t('market.fname4')" align="center">
              <template slot-scope="scope">
                <div v-for="item in scope.row.children" :key="item.fid" class="erlei">
                  <div class="divHeight" />
                  <div style="display: block;flex-direction: column;width: 100%;">
                    <div v-for="ite in item.children" :key="ite.fid" class="erlei">
                      <div class="divHeight" />
                      <div style="display: block;flex-direction: column;width: 100%;">
                        <div v-for="it in ite.children" :key="it.fid" class="erlei">
                          {{ it.fname }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="medium" :label="$t('market.fnumber4')" align="center">
              <template slot-scope="scope">
                <div v-for="item in scope.row.children" :key="item.fid" class="erlei">
                  <div class="divHeight" />
                  <div style="display: block;flex-direction: column;width: 100%;">
                    <div v-for="ite in item.children" :key="ite.fid" class="erlei">
                      <div class="divHeight" />
                      <div style="display: block;flex-direction: column;width: 100%;">
                        <div v-for="it in ite.children" :key="it.fid" class="erlei">
                          {{ it.fnumber }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </jc-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { queryContrast, queryLargeLists } from '@/api/encodingRules/codeComparative'

export default {
  name: 'CodeComparative',
  data() {
    return {
      tableHeight: '75vh',
      activeName: '45', // 第一个选项卡
      LargeCode: 11, // 选择的大类名称
      oneMaterielData: [], // 搜索-下拉框数据-大类名称
      tableData: [], // 列表数据
      tableHeader: [
        // { label: this.$t('shop.name1'), prop: 'fname', align: 'left', width: '200' },
        // { label: this.$t('shop.fnumber'), prop: 'fnumber', width: '100' }
      ]
    }
  },
  watch: {
    // 监听切换选项卡
    activeName(val) {
      this.tableData = []
      this.LargeCode = val
      this.getRoleList()
    }
  },
  created() {
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 210px)' : '75vh'
    this.queryLargeList()
  },
  methods: {
    // 查询编码对照表数据
    async getRoleList() {
      const DATA = { fid: this.LargeCode }
      const { data: RES } = await queryContrast(DATA)
      this.tableData = RES
    },
    // 查询大类列表
    async queryLargeList() {
      const { data: RES } = await queryLargeLists({})
      this.oneMaterielData = RES
      this.LargeCode = RES[0].fid
      this.activeName = RES[0].fid + ''
      this.getRoleList()
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  padding:10px;
  background-color: white;
}
#barChart {
  width: 100%;
  height: 400px;
}
.codeTable {
  padding: 10px;
  .el-tabs ::v-deep .el-tabs__item{
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
  }
  .table-content{
    margin-top: 0;
  }
  .codeRule{
    font-size: 14px;
    border: 1px solid #ccc;
    border-bottom: none;
  }
  .erlei{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-bottom: 1px solid #aaa;
  }

  .erlei:nth-last-child(1){
    border-bottom: none;
  }
  .divHeight{
    height: 2.12582vh;
    width: 0;
    border-bottom: 0.052vw solid #aaa;
  }
  .divHeight:nth-last-child(1){
    border-bottom: none;
  }
  .el-tabs__nav{
    white-space: pre-line;
  }
  .el-table {
    &::v-deep .cell {
      padding: 0;
    }
  }
  .el-table ::v-deep td{
    &:nth-last-child(8) {
      vertical-align: baseline;
    }
    &:nth-last-child(7) {
      vertical-align: baseline;
    }
  }
}
</style>
